<template>
  <div class="table-padding">
    <el-form :inline="true" :model="formInline" size="mini" :label-width="100" >
      <el-form-item label="活动名称：" >
        <el-input v-model="formInline.CREATE_USER_NAME"
                  placeholder="活动名称"></el-input>
      </el-form-item>
      <el-form-item label="活动时间区：">
        <el-date-picker
          v-model="formInline.CREATE_DATE"
          type="daterange"
          value-format="yyyy-MM-dd"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期">
        </el-date-picker>
      </el-form-item>
      <el-form-item class="float-right">
        <el-button type="primary" @click="searchRecord" icon="el-icon-search">查询</el-button>
      </el-form-item>
    </el-form>
    <el-table
      :data="tableData"
      border
      style="width: 100%">
      <el-table-column label="序号" type="index" align="center" width="50"></el-table-column>
      <el-table-column
        prop="province"
        label="活动名称"
        align="center"
        show-overflow-tooltip
        width="150">
      </el-table-column>
      <el-table-column
        prop="address"
        label="活动地点"
        show-overflow-tooltip
        align="center"
        width="220">
      </el-table-column>
      <el-table-column
        prop="date"
        label="活动时间"
        sortable
        align="center"
        width="120">
      </el-table-column>
      <el-table-column
        prop="city"
        label="活动状态"
        sortable
        align="center"
        width="110">
      </el-table-column>
      <el-table-column
        prop="name"
        label="参与人"
        align="center"
        width="100">
      </el-table-column>
      <el-table-column
        label="操作"
        align="center"
        width="120">
        <template slot-scope="scope">
          <el-button type="text" size="small">取消</el-button>
          <el-button @click="handleClick(scope.row)" type="text" size="small">查看详情</el-button>

        </template>
      </el-table-column>
    </el-table>
    <pagination :msg="page" @refreshList="onRefresList"></pagination>
  </div>

</template>

<script>
  import pagination from '../../views/localPage/pagination'
    export default {
        name: "MyActive",
      components:{pagination},
      data() {
        return {
          page:{
            pagesize:4,
            total:900,
          },
          tableData: [{
            date: '2016-05-02',
            name: '王小虎',
            province: '上海',
            city: '普陀区',
            address: '上海市普陀区金沙江路 1518 弄111111',
            zip: 200333
          }, {
            date: '2016-05-04',
            name: '王小虎',
            province: '上海',
            city: '普陀区',
            address: '上海市普陀区金沙江路 1517 弄',
            zip: 200333
          }, {
            date: '2016-05-01',
            name: '王小虎',
            province: '上海',
            city: '普陀区',
            address: '上海市普陀区金沙江路 1519 弄',
            zip: 200333
          }, {
            date: '2016-05-03',
            name: '王小虎',
            province: '上海',
            city: '普陀区',
            address: '上海市普陀区金沙江路 1516 弄',
            zip: 200333
          }],
          formInline:{},
        }
        },
      methods: {
        handleClick(row) {
          console.log(row);
        },
        searchRecord(){

        },
        onRefresList(val){
          console.log(val)
        }
      },

    }
</script>

<style scoped>
.table-padding{
  padding: 20px;
}
</style>
